<template>
<div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">  
    <!-- slides -->
    <swiper-slide  v-for="list in swiperhomey" :key="list.id">
        <img :src="list.imgUrl" alt="">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>

</template>

<script>
 export default {
     name:"",
     props:{
         swiperhomey:Array
     },
   data () {
     return {   
        swiperOption: {
            pagination:".swiper-pagination",
            loop:true
        },
     }
   },
   components: {

   },
   computed:{
       showSwiper () {
           return this.swiperhomey.length
       }
   }
 }
</script>

<style lang="" scoped>
     /* >>> 三个符号 确定了穿透scoped 不受scoped控制 */
     .wrapper >>>.swiper-pagination-bullet-active{
        background: white;
    }
    .wrapper{
        width: 100%;
        /* height: 31.25vm; */
        height: 0;
        overflow: hidden;
        padding-bottom: 31.25%;
        background: #e4e4e4;
    }
    img{
        width: 100%;
    }
 
</style>
